<template>
    <div class="bar-box" :style="{ height: height + 'px' }">
        <div
            v-for="item in renderData"
            :key="item.name"
            :style="{ backgroundColor: item.color, width: item.percent }"
            class="item"
        ></div>
    </div>
</template>

<script setup lang="ts">
const props = withDefaults(
    defineProps<{
        list: { name: string; value: number; color: string }[]
        height?: number
    }>(),
    {
        list: () => [],
        height: 12,
    },
)

const renderData = computed(() => {
    const len = props.list.length
    const total = props.list.reduce((a, b) => {
        return a + b.value
    }, 0)

    return props.list.map(item => {
        return {
            ...item,
            percent:
                total && typeof total === 'number'
                    ? (item.value / total) * 100 + '%'
                    : 100 / len + '%',
        }
    })
})
</script>

<style lang="scss" scoped>
/*! scopecss-disable */
.bar-box {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 12px;
    overflow: hidden;

    .item {
        height: 100%;
    }
}
/*! scopecss-enable */
</style>
